<template>
	<view class="goods-page">
		<u-navbar title="批货" bgColor="rgba(255,255,255,0.0)" left-icon="" :placeholder="true">
		</u-navbar>
		<view class="content">
			<view class="tabs">
				<view :class="item.show == true?'activity-item':''" class="tabs-item" v-for="(item,index) in tabsLits"
					:key="index" @click="cutTbas(index)">
					{{item.text}}
				</view>
			</view>
			<view class="switch-box">
				<view class="switch">
					<view class="title" v-if="value == true">
						<view class="text">批货中</view>
						<u-loading-icon size="16"></u-loading-icon>
					</view>
					<view class="title" v-if="value == false">
						<view class="text">开始批货</view>
					</view>
					<view class="tisp" v-if="value == true">
						自动接单中:￥{{info.minAmount}} ~ ￥{{info.maxAmount}},开启时间: {{info.openTime}}
					</view>
				</view>
				<u-switch v-model="value" asyncChange @change="goshow" activeColor="#FB6005"></u-switch>
			</view>
			<view class="goods" v-if="list.length > 0">
				<view class="goods-item" v-for="(item,index) in list" @click="goorder(item.id)" :key="index">
					<view class="img-box">
						<image :src="item.goodsImgs" mode=""></image>
					</view>
					<view class="goods-info">
						<view class="goods-title">
							{{item.goodsName}}
						</view>
						<view class="goods-price">
							￥{{item.skPrice}}
						</view>
						<view class="goods-tisp" v-if="item.orderStatus == '1'">
							请在5分钟内完成付款！
						</view>
						<view class="goods-tisp" v-if="item.orderStatus == '2'">
							审核中...
						</view>
						<view class="goods-tisp" v-if="item.orderStatus == '3'">
							批货失败
						</view>
						<view class="goods-tisp" v-if="item.orderStatus == '4'">
							批货成功
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="list.length > 0" />
		</view>
		<view v-if="list.length < 1">
			<u-empty mode="car" icon="../../static/goods/no_order.png" marginTop="30rpx" text="目前没有订单"></u-empty>
		</view>
		<u-popup :show="show" @close="close" round="10" mode="center">
			<view class="popup">
				<view class="popup-title">请输入接单金额范围</view>
				<view class="title">
					最小金额
				</view>
				<view class="text">
					<u-input placeholder="最小金额" type="number" border="none" v-model="minpirce">
					</u-input>
				</view>
				<view class="title">
					最大金额
				</view>
				<view class="text">
					<u-input placeholder="最大金额" type="number" border="none" v-model="maxpirce">
					</u-input>
				</view>
				<view class="popup-btn">
					<u-button type="primary" text="确定" @click="goquer"
						color="linear-gradient(90deg, #FE8A03 0%, #FA5900 100%)"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minpirce: '',
				maxpirce: '',
				show: false,
				tabsLits: [{
						text: '待付款',
						show: true
					},
					{
						text: '审核中',
						show: false
					},
					{
						text: '已拒绝', 
						show: false
					},
					{
						text: '已完成',
						show: false
					}
				],
				index: 1,
				value: false,
				page: 1,
				status: 'loadmore',
				info: {},
				list: []
			}
		},
		onShow() {
			this.page = 1
			this.postlist()
			this.getTaking()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.postlist()
		},
		methods: {
			goquer() {
				if (this.minpirce == '') {
					uni.showToast({
						title: '请输入最小金额！',
						icon: 'none'
					})
					return
				}
				if (this.maxpirce == '') {
					uni.showToast({
						title: '请输入最大金额！',
						icon: 'none'
					})
					return
				}
				if (this.minpirce >= this.maxpirce) {
					uni.showToast({
						title: '最小金额不可等于或高于最大金额！',
						icon: 'none'
					})
					return
				}
				let params = {
					minAmount: this.minpirce,
					maxAmount: this.maxpirce
				}
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/goods/taking/openTaking',
					data: params,
					ismsg: true,
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 200) {
						this.show = false
						this.getTaking()
					} else {
						if (res.msg == 'USDT') {
							this.show = false
							uni.showToast({
								title: '请绑定USDT账户！',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/account/receive/list?type=' + 4
								})
							}, 500)
							return
						}
						if (res.msg == '银行卡') {
							this.show = false
							uni.showToast({
								title: '请绑定银行卡账户！',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/account/receive/list?type=' + 3
								})
							}, 500)
							return
						}
						if (res.msg == '微信') {
							this.show = false
							uni.showToast({
								title: '请绑定微信账户！',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/account/receive/list?type=' + 2
								})
							}, 500)
							return
						}
						if (res.msg == '支付宝') {
							this.show = false
							uni.showToast({
								title: '请绑定支付宝账户！',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/account/receive/list?type=' + 1
								})
							}, 500)
							return
						}
					}
				})
			},
			getTaking() {
				this.$Request({
					method: 'GET',
					url: '/api/goods/taking/getTaking',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
						if (res.data.minAmount != null) {
							this.minpirce = res.data.minAmount
						}
						if (res.data.minAmount != null) {
							this.maxpirce = res.data.maxAmount
						}
						if (res.data.isOpen == '0') {
							this.value = false
						} else {
							this.value = true
						}
					}
				})
			},
			goshow(e) {
				if (e == true) {
					this.show = true
				} else {
					uni.showLoading({
						mask: true
					})
					this.$Request({
						method: 'GET',
						url: '/api/goods/taking/closeTaking',
						data: {},
						ismsg: false,
					}).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							uni.showToast({
								title: '停止批货！',
								icon: 'none'
							})
							this.getTaking()
						}
					})
				}
			},
			close() {
				this.show = false
			},
			goorder(id) {
				uni.navigateTo({
					url: '/pages/purchasing/order/index?id=' + id
				})
			},
			postlist() {
				let params = {
					orderStatus: this.index,
					pageNum: this.page,
					pageSize: 10
				}
				this.$Request({
					method: 'GET',
					url: '/api/goods/order/list',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						if (res.rows.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.rows
						} else {
							this.list = [...this.list, ...res.rows]
						}
					}
				})
			},
			cutTbas(index) {
				this.tabsLits.map(item => {
					item.show = false
				})
				this.tabsLits[index].show = true
				this.index = index + 1
				this.page = 1
				this.postlist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-page {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.popup {
			width: 520rpx;
			padding: 30rpx;

			.popup-title {
				text-align: center;
				font-weight: 900;
				font-size: 32rpx;
			}

			.popup-btn {
				margin-top: 50rpx;
			}

			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.text {
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
				padding: 20rpx 30rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
			}
		}

		.content {
			padding: 30rpx;

			.goods {
				margin-top: 40rpx;

				.goods-item {
					background-color: #ffffff;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
					margin-bottom: 20rpx;

					.img-box {
						width: 160rpx;
						margin-right: 30rpx;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
						}
					}

					.goods-info {
						width: 100%;
						color: #333333;

						.goods-title {
							font-size: 28rpx;
							font-weight: bold;
						}

						.goods-price {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: #FA5900;
							font-weight: bold;
						}

						.goods-tisp {
							font-size: 26rpx;
							margin-top: 20rpx;
							text-align: right;
							color: red;
						}
					}

				}
			}

			.tabs {
				width: 100%;
				display: flex;
				justify-content: space-between;
				background-color: #ffffff;
				padding: 6rpx;
				border-radius: 40rpx;
				margin: 0 auto;

				.tabs-item {
					width: 50%;
					padding: 20rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					text-align: center;
				}

				.activity-item {
					color: #ffffff;
					background: linear-gradient(90deg, #FE8A03 0%, #FA5900 100%);
				}
			}

			.switch-box {
				margin-top: 30rpx;
				padding: 20rpx 30rpx;
				border-radius: 30rpx;
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.switch {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;

					.title {
						display: flex;
						align-items: center;

						.text {
							margin-right: 10rpx;
						}
					}

					.tisp {
						font-size: 24rpx;
						color: #666;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>